<script setup>
import recruitInfo from '@/assets/data/recruit'

const route = useRoute()
const id = route.params.id
const info = recruitInfo.find(item => item.id === Number(id))
</script>

<template>
  <div>
    <div class="header">
      <div class="wrapper">
        <h3>{{ info.post }}</h3>
        <div class="salary">{{ info.salary }}</div>
        <ul class="footer">
          <li>成都-温江区</li>
          <li>{{ info.experience }}</li>
          <li>{{ info.education }}</li>
          <li>{{ info.type }}</li>
          <li>招{{ info.number }}人</li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="wrapper">
        <div class="description">
          <h3 class="title">职位描述</h3>
          <ul class="tags">
            <li v-for="(tag, index) in info.tags" :key="index">
              {{ tag }}
            </li>
          </ul>
          <div class="requirement">
            <p v-for="(item, index) in info.requirement" :key="index">
              {{ index + 1 }}.{{ item }}
            </p>
          </div>
        </div>
        <div class="address">
          <h3 class="title">工作地点</h3>
          <div>
            <Icon
              name="ep:location-filled"
            />成都市温江区科林西路618号华银工业港7区1号
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  padding: 50px 100px;
}
.title {
  position: relative;
  font-size: 18px;
  color: #333;
  text-align: left;
  margin-bottom: 12px;
  &:after {
    background: #f0f0f0;
    content: '';
    display: inline-block;
    height: 1px;
    position: absolute;
    right: 0;
    top: 9px;
    width: 92%;
  }
}

.header {
  background-color: #f5faff;
  .wrapper {
    h3 {
      font-size: 24px;
      color: #333;
      margin-bottom: 12px;
    }
    .salary {
      font-size: 24px;
      color: #ff424f;
      margin-bottom: 18px;
    }
    .footer {
      display: flex;
      margin-left: -10px;
      li {
        padding: 0 10px;
        font-size: 14px;
        color: #999;
        &:nth-child(n + 2) {
          border-left: 1px solid #dcdfe6;
        }
      }
    }
  }
}

.main {
  .wrapper {
    .description {
      margin-bottom: 30px;
      .tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12px;
        font-size: 14px;
        li {
          padding: 5px;
          margin-bottom: 10px;
          margin-right: 10px;
          background-color: #f5faff;
          border-radius: 5px;
          border: 2px solid #f0f0f0;
        }
      }
      .requirement {
        p {
          font-size: 16px;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>
